<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            width: 1000px;
            margin: 0 auto;
        }
        .m1 {
            height: 400px;
            background: #ffe87b;
        }
        .m1>.left {
             width: 200px;
             height: 100%;
             background: #000;
             float: left;
         }
        .m1>.right {
            /*float: left;
            width: calc(1000px - 200px);*/
            height: 100%;
            background: #c02e14;
            overflow: hidden;
        }

        .m2 {
            height: 400px;
            background: #ffe87b;
        }
        .m2>.left {
            width: 200px;
            height: 100%;
            background: #000;
            float: left;
        }
        .m2>.middle {
            height: 100%;
            background: #189927;
            /*overflow: hidden;  !*触发BFC*!*/

            width: calc(1000px - 200px - 200px);
            float: left;
        }
        .m2>.right {
            float: right;
            width: 200px;
            height: 100%;
            background: #b41a28;
        }

        .box1 {
            width: 200px;
            height: 200px;
            background: #000;
            margin: 0 auto;
            /*overflow: hidden;  !*触发BFC*!*/
        }
        /*.box1::before {
            display: table;
            content : ''
        }*/

        .clearfix::before,  /*伪元素选择器*/
        .clearfix::after{
            display: table;
            content : '';
            clear : both
        }

        .child1 {
            width: 100px;
            height: 100px;
            background: #fff41c;
            margin-top:50px;
        }
        .ele1 {
            width: 100px;
            height: 100px;
            background: #000;
            margin-bottom: 50px;
        }
        .ele2 {
            margin-top: 50px;
            width: 100px;
            height: 100px;
            background: #8b0dc3;
        }
        .bfc-box {
            overflow: hidden;
        }

        .box2 {
            width: 400px;
            background: #6f9976;
            margin: 0 auto;
            /*height: 200px;*/
            /*overflow: hidden;  !*触发父容器的BFC,将浮动的高度计算进来*!*/
        }
        /*.box2::after {
            display: table;
            content: "";
            clear: both;
        }*/
        .box2 > .child {
            float: left;
        }
        .box2>.child:nth-of-type(1) {
            width: 100px;
            height: 150px;
            background: #ffd35b;
        }
        .box2>.child:nth-of-type(2) {
            width: 100px;
            height: 100px;
            background: #ff4c57;
        }
        .box2>.child:nth-of-type(3) {
            width: 100px;
            height: 200px;
            background: #3341ff;
        }
    </style>
</head>
<body>
    <h1>BFC 触发效果</h1>
    <h2>场景1:两列布局</h2>
    <div class="container m1">
        <div class="left"></div>
        <div class="right"></div>
    </div>

    <h2>场景2:三列布局</h2>
    <div class="container m2">
        <div class="left"></div>
        <div class="right"></div>
        <div class="middle"></div>
    </div>

    <h2>场景3:子父容器边框重叠</h2>
    <div class="box1 clearfix">
        <div class="child1"></div>
    </div>

    <h2>场景3:子父容器外边距重叠，margin上下取较大者</h2>
    <div class="bfc-box">
        <div class="ele1"></div>
    </div>
    <div class="ele2"></div>

    <h2>场景5:父容器高度塌陷</h2>
    <div class="box2 clearfix">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <!--<div style="clear:both"></div>-->
    </div>
</body>
</html>